<template>
	<view>
		<!-- <image class="bg" :src="info.data?.image || ''" mode=""></image> -->


		<u-swiper :list="info.data.other_images" :autoplay="false" height='1221rpx'>
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		<view class="info">
			<view class="infoTitle">
				{{info.data?.name || ''}}
			</view>


		</view>

		<!-- <view class="detail">
			商品详情
		</view> -->
		<!-- 
		<u-parse :content="info.data.package_scheme"></u-parse>
		 -->


		<image class="fanhui" src="../../static/image/img/fanhui.png" mode=""></image>

		<image class="shouye" src="../../static/image/img/shouye.png" mode=""></image>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import searchs from '@/components/search/searchs.vue'
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		searchdetail
	} from '../../network/home.js'



	let info = reactive({
		id: '',
		data: null
	})

	onLoad((data) => {
		info.id = data.id
		getDetail()
	})

	const getDetail = () => {
		searchdetail({
			id: info.id
		}).then(res => {
			console.log(res);
			info.data = res.data
		})
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 1221rpx;
		// background-color: #000;
	}

	.info {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.infoTitle {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
	}

	.infoTips {
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		padding: 32rpx 0;
	}

	.detail {
		padding: 36rpx 30rpx 57rpx;
	}

	.fanhui {
		position: fixed;

		width: 90rpx;
		height: 90rpx;
		bottom: 200rpx;
		right: 39rpx;

	}

	.shouye {
		position: fixed;

		width: 90rpx;
		height: 90rpx;
		bottom: 80rpx;
		right: 39rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;



		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>